<template>
	<view>
		<tabBar :current-page="3"></tabBar>
		<div class="message-header">
			<p>消息</p>		
		</div>
		<div class='kong'></div>
		<div class='message-flex'>
			<div @click="activity">
				<img src="/static/image/tabBar/活动消息.png" alt="">
				<p>活动消息</p>
			</div>
			<div @click="square">
				<img src="/static/image/tabBar/广场消息.png" alt="">
				<p>广场消息</p>
			</div>
		</div>
		<!--  -->
		<div class="message-list">
			<div class="message-xx">
				<div class="list-avatar">
					<!-- <u-avatar :src="src" size="55"></u-avatar> -->
					<img :src="src" alt="">
				</div>
				<div @click="news">
					<div class="list-name">
						<p>阿猫阿狗</p>
						<span>交易成功</span>
					</div>
					<div>
						<p class="XT">[系统]买家确认收货,钱已到账啦！请确认收款！</p>
					</div>
				</div>
			</div>
			<!-- <u-divider text="分割线"></u-divider> -->
			<div class="message-xx">
				<div class="list-avatar">
					<!-- <u-avatar :src="src" size="55"></u-avatar> -->
					<img :src="src" alt="">
				</div>
				<div @click="news">
					<div class="list-name">
						<p>阿猫阿狗</p>
						<span>交易成功</span>
					</div>
					<div>
						<p class="XT">[系统]买家确认收货,钱已到账啦！请确认收款！</p>
					</div>
				</div>
			</div>
			<div class="message-xx">
				<div class="list-avatar">
					<!-- <u-avatar :src="src" size="55"></u-avatar> -->
					<img :src="src" alt="">
				</div>
				<div @click="news">
					<div class="list-name">
						<p>阿猫阿狗</p>
						<span>交易成功</span>
					</div>
					<div>
						<p class="XT">[系统]买家确认收货,钱已到账啦！请确认收款！</p>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar.vue'
	export default {
		components:{tabBar},
		data() {
			return {
				src: '/static/image/tabBar/tx1.jpg'
			};
		},

		methods: {
			activity(){
				uni.navigateTo({
					url:"/pages/actisqu/activity"
				})
			},
			square(){
				uni.navigateTo({
					url:"/pages/actisqu/square"
				})
			},
			news(){
				uni.navigateTo({
					url:"/pages/Message/news"
				})
			}
			
		},
	}
</script>

<style lang="scss">
img{
	width:45%;
	height:65%;
}
.kong{
	height: 180upx;
}
.message-header{
	background-image: url("/static/image/tabBar/渐变背景.png") ;
	background-size:100%;
	border-bottom-right-radius: 20px; 
	border-bottom-left-radius: 20px;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.message-header>p{
	color:white;
	text-align: center;
	padding-top:2.5rem;
	// margin-bottom:1.5rem;
	height: 300upx;
}
.message-flex{
	display: flex;
	justify-content: center;
	background-color: white;
	border-radius: 10px;
	width:90%;
	margin: 0 auto;
	padding-top:1rem;
	top:3.5rem;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.message-flex>div>img{
	// margin: 0 auto;
	margin-left:2.9rem;
	margin-bottom:0.75rem;
}
.message-flex>div>p{
	text-align: center;
	font-size: 13px;
}
.message-list{
	margin-top:3rem;
}
.message-xx{
	display:flex;
	margin-bottom:0.45rem;
	padding-bottom:0.7rem;
	border-bottom:1px solid #d6d6d6;
}
.list-name{
	display:flex;
}
.list-name>p{
	font-size:22px;
}
.list-name>span{
	color:red;
	font-size:10px;
	padding-top:0.75rem;
	margin-left:1rem;
}
.XT{
	font-size:12px;
	color:gray;
	margin-top:0.5rem;
}
.list-avatar{
	margin-left:1rem;
	margin-right:1rem;
	img{
		width: 110upx;
		height: 110upx;
		border-radius: 50%;
	}
}
</style>